$(function() {
  var height = $(document).height();
  console.log(height, "高度");
  $(".wrap").height(height);
  var headHeight = $(".head").height();
  var cardContentHeight = $(".card-content").height();
  $(".card-table").height(height - headHeight - cardContentHeight - 110);
  var data = [
    {
      dh: "ZZ12312322123",
      bm: 122,
      bh: 1,
      wlmc: {
        wl1: "JP柜子",
        wl2: "KMF",
        wl3: "三回",
        wl4: "无补偿"
      },
      wlbm: 13343,
      sl: 2,
      yxl: 2,
      zt: "已入库"
    },
    {
      dh: "ZZ12319323123",
      bm: 163,
      bh: 8,
      wlmc: {
        wl1: "JP柜子",
        wl2: "KMF",
        wl3: "三回",
        wl4: "无补偿"
      },
      wlbm: 13343,
      sl: 6,
      yxl: 12,
      zt: "未入库"
    },
    {
      dh: "ZZ12312523123",
      bm: 15,
      bh: 4,
      wlmc: {
        wl1: "JP柜子",
        wl2: "KMF",
        wl3: "三回",
        wl4: "无补偿"
      },
      wlbm: 13343,
      sl: 8,
      yxl: 9,
      zt: "已入库"
    }
  ];
  data.forEach((element, index, arr) => {
    var trHTML =
      '<tr class="dragStart">' +
      `<td>${element.dh}</td>` +
      `<td>${element.bm}</td>` +
      `<td>${element.bh}</td>` +
      "<td>" +
      `<span class="td-span">${element.wlmc.wl1}</span>` +
      `<span class="td-span">${element.wlmc.wl2}</span>` +
      `<span class="td-span">${element.wlmc.wl3}</span>` +
      `<span class="td-span">${element.wlmc.wl4}</span>` +
      " </td>" +
      `<td>${element.wlbm}</td>` +
      `<td>${element.sl}</td>` +
      `<td>${element.yxl}</td>` +
      `<td><a href="#">${element.zt}</a></td>` +
      "</tr>";
    $("#table-num").append(trHTML);
  });

  // 数据排序
  var sortValue = "";
  var isSort = {};
  var arrNew = [];
  $("#table-num tr th").on("click", function() {
    sortValue = $(this).attr("data-value");
    isSort[sortValue] = !isSort[sortValue];
    $(this)
      .css({ background: "rgba(1, 169, 244, 0.5)", color: "#fff" })
      .siblings()
      .css({ background: "rgba(1, 169, 244, 0)", color: "#000" });
    if (isSort[sortValue]) {
      arrNew = _.sortBy(data, function(item) {
        return item[sortValue];
      });
    } else {
      var arrNew = _.sortBy(data, function(item) {
        return -item[sortValue];
      });
      //   $(this).css({ background: "rgba(1, 169, 244, 0)", color: "#000" });
    }
    $(this)
      .parent("tr")
      .nextAll()
      .remove();
    arrNew &&
      arrNew.length > 0 &&
      arrNew.forEach((element, index, arr) => {
        var trHTML =
          '<tr class="dragStart">' +
          `<td>${element.dh}</td>` +
          `<td>${element.bm}</td>` +
          `<td>${element.bh}</td>` +
          "<td>" +
          `<span class="td-span">${element.wlmc.wl1}</span>` +
          `<span class="td-span">${element.wlmc.wl2}</span>` +
          `<span class="td-span">${element.wlmc.wl3}</span>` +
          `<span class="td-span">${element.wlmc.wl4}</span>` +
          " </td>" +
          `<td>${element.wlbm}</td>` +
          `<td>${element.sl}</td>` +
          `<td>${element.yxl}</td>` +
          `<td><a href="#">${element.zt}</a></td>` +
          "</tr>";
        $("#table-num").append(trHTML);
      });
    console.log(arrNew, "排序");
  });

  //表格拖动
  $("#table-num").tableDnD({
    //滚动的速度
    scrollAmount: 10,
    onDragClass: "highlight",
    //当拖动排序完成后
    onDrop: function(table, row) {
      //获取id为table的元素
      var table = $("#table-num");
      //获取table元素所包含的tr元素集合
      var tr = $("#table-num tr.dragStart");
      //遍历所有的tr
      for (var i = 0; i < tr.length; i++) {
        //获取拖动排序结束后新表格中，row id的结果
        var rowid = tr[i].getAttribute("id");
        //console.log("排序完成后表格的第 " + (i+1) + " 行id为 : " + rowid);
      }

      //console.log( $('#table').tableDnDSerialize());
    },
    onDragStart: function(table, row) {
      //console.log(row.id);
    }
  });
});
